<template>
	<view class="content">
		<common-picker @confirm="handleConfirm"></common-picker>
		<view class="aside"  v-for="(item,index) in list" :key="index">
			<view class="aside-card" @click="btnFn(item)">
				<view class="card-top">
					{{item.community_name}}
				</view>
				<view class="card-center">
					<view class="card-center-left">
						{{item.user_type}}
					</view>
					<view class="card-center-right">
						{{item.status}}
					</view>
				</view>
				<view class="card-center">
					<view class="card-center-left">
						{{item.start_time}}
					</view>
				</view>
			</view>
		</view>
		<no-data v-if="list && list.length==0" :src="noDataSrc" :txt="noDataTxt"></no-data>
		<!--loadmore-->
		<view class="loadmore" v-if="loadmoreShow">
			<u-loadmore :status="loadmoreStatus" icon-type="flower" />
		</view>
		<uv-back :scroll="scrollTop"></uv-back>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: '',
				page: 1, //当前页码，默认1
				total: 0, //总条数
				type: 2, // 1充值订单问题 2充电订单问题
				scrollTop: 0,
				loadmoreShow: false,
				pickerTime:'',//currently selected time
				loadmoreStatus: 'loading', //上拉分页底部提示组件
				//no-data
				noDataSrc:this.$noData,
				noDataTxt:'暂无充电记录'
			}
		},
		onLoad() {

			if (uni.getStorageSync('userId')) {
				this.getListRequest();
			} else {
				uni.reLaunch({
					url: "/pages/index/index"
				});
			};
		},
		//back to the top
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.loadmoreShow) {
				return false;
			}
			this.loadmoreShow = true;
			if (this.page < Math.ceil(this.total / 10)) {

				this.page++;
				this.getListRequest();
			} else {
				//no more
				this.loadmoreStatus = 'nomore';
				this.loadmoreShow = true;
			}
		},
		methods: {
			btnFn(item) {
				uni.$emit('returnData', item)
				uni.navigateBack({
					delta: 1
				})
			},
			_reset() {
				this.page = 1;
				this.loadmoreShow = false;
				this.loadmoreStatus = 'loading';
				this.total = 0;
				this.list = '';
			},
			handleConfirm(param) {
				this._reset();
				this.pickerTime = param.date;
				this.getListRequest();
			},
			getListRequest() {
				const arr = this.page == 1 ? [] : this.list;
				this.$u.api.getorderList({
					time: this.pickerTime,
					pages: this.page,
					type:this.type
				}).then(res => {
					console.log(res.data);
					if (res.result_code == 300) {
						const list = [...arr, ...res.data.list];
						this.list = list;
						this.total = res.data.num;

					} else {
						this.$utils.modal({
							content: res.msg,
							showCancel: false,
							callback: (bool) => {

							}
						});
					};
					this.loadmoreShow = false;
				}).catch(() => {
					this.loadmoreShow = false;
				});
			},

		}
	}
</script>

<style scoped>
	.content {
		padding-top: 100rpx;
	}

	.aside {
		background: #fff;
		padding: 0 30rpx;
	}

	.aside-card {
		padding: 20rpx 0;
		margin-top: 20rpx;
		overflow: hidden;
	}

	.card-top {
		font-size: 30rpx;
		font-weight: 700;
	}

	.card-center {
		overflow: hidden;
		margin-top: 20rpx;
		font-size: 25rpx
	}

	.card-center-left {
		font-weight: 600;
		font-size: 27rpx;
		float: left;
	}

	.card-center-right {
		font-size: 27rpx;
		float: right;
		color:#0DA297;
	}
	.loadmore{
		padding:30rpx 0;
	}
</style>
<style>
	page{
		background: #F4F4F4;
	}
</style>
